.mui-bar {
  position: relative;
  padding: 0 px2rem(15);
  background-color: #fff;

  .mui-bar__title {
    position: absolute;
    display: block;
    width: 100%;
    padding: 0;
    margin: 0 px2rem(-15);
    font-weight: normal;
    text-align: center;
    white-space: nowrap;
  }

  .mui-bar__left,
  .mui-bar__tools {
    padding: 0 px2rem(18);
    position: relative;
    z-index: 1;

    [class*='mui-icon-'] {
      vertical-align: middle;
    }
  }

  .mui-bar__left {
    float: left;
  }

  .mui-bar__tools {
    float: right;
  }

  &.mui-bar_bottom-line {
    &:before {
      @include setBottomLine($colorLineLight);
    }
  }
}

/* nav */
.mui-bar_nav {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: px2rem(88);

  .mui-bar__title {
    line-height: px2rem(88);
    color: $colorTextMain;
    font-size: $fontTitle;
  }

  .mui-bar__left,
  .mui-bar__tools {
    line-height: px2rem(88);
    color: #474747;
    font-size: $fontHeadline;
  }
}

/* modal */
.mui-bar_modal {
  height: px2rem(88);
  color: $colorTextMain;

  .mui-bar__title {
    line-height: px2rem(88);
    font-size: $fontSTitle;
  }

  .mui-bar__left,
  .mui-bar__tools {
    line-height: px2rem(88);

    .mui-icon {
      font-size: $fontSBody;
      vertical-align: middle;
      color: $colorTextAssistant;
    }
  }
}
